import React, { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  Switch,
  Alert,
} from 'react-native';
import { useAuth } from '../context/AuthContext';

// 定义明确的类型
interface SwitchSetting {
  id: string;
  title: string;
  description: string;
  type: 'switch';
  value: boolean;
  onValueChange: (value: boolean) => void;
}

interface NavigationSetting {
  id: string;
  title: string;
  description: string;
  type: 'navigation';
}

type SettingItem = SwitchSetting | NavigationSetting;

const SettingsScreen: React.FC = () => {
  const { logout } = useAuth();
  const [notifications, setNotifications] = useState<boolean>(true);
  const [darkMode, setDarkMode] = useState<boolean>(false);

  const handleLogout = () => {
    Alert.alert(
      '确认退出',
      '您确定要退出登录吗？',
      [
        { text: '取消', style: 'cancel' },
        { text: '退出', onPress: logout, style: 'destructive' },
      ]
    );
  };

  const settingsSections: Array<{
    title: string;
    items: SettingItem[];
  }> = [
    {
      title: '通用设置',
      items: [
        {
          id: '1',
          title: '消息通知',
          description: '接收推送通知',
          type: 'switch',
          value: notifications,
          onValueChange: setNotifications,
        },
        {
          id: '2',
          title: '深色模式',
          description: '启用深色主题',
          type: 'switch',
          value: darkMode,
          onValueChange: setDarkMode,
        },
      ],
    },
    {
      title: '账户',
      items: [
        {
          id: '3',
          title: '隐私设置',
          description: '管理隐私选项',
          type: 'navigation',
        },
        {
          id: '4',
          title: '语言设置',
          description: '应用语言',
          type: 'navigation',
        },
      ],
    },
  ];

  // 类型守卫函数
  const isSwitchSetting = (item: SettingItem): item is SwitchSetting => {
    return item.type === 'switch';
  };

  return (
    <ScrollView style={styles.container}>
      {settingsSections.map((section, index) => (
        <View key={index} style={styles.section}>
          <Text style={styles.sectionTitle}>{section.title}</Text>
          {section.items.map(item => (
            <TouchableOpacity
              key={item.id}
              style={styles.settingItem}
              onPress={() => {
                if (item.type === 'navigation') {
                  Alert.alert('导航到' + item.title);
                }
              }}
            >
              <View style={styles.settingInfo}>
                <Text style={styles.settingTitle}>{item.title}</Text>
                <Text style={styles.settingDescription}>{item.description}</Text>
              </View>
              
              {isSwitchSetting(item) ? (
                <Switch
                  value={item.value}
                  onValueChange={item.onValueChange}
                />
              ) : (
                <Text style={styles.navigationArrow}>›</Text>
              )}
            </TouchableOpacity>
          ))}
        </View>
      ))}

      <TouchableOpacity style={styles.logoutButton} onPress={handleLogout}>
        <Text style={styles.logoutButtonText}>退出登录</Text>
      </TouchableOpacity>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f8f9fa',
  },
  section: {
    backgroundColor: 'white',
    marginTop: 10,
    paddingHorizontal: 15,
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#666',
    marginTop: 15,
    marginBottom: 10,
  },
  settingItem: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#E5E5E5',
  },
  settingInfo: {
    flex: 1,
  },
  settingTitle: {
    fontSize: 16,
    color: '#333',
  },
  settingDescription: {
    fontSize: 12,
    color: '#666',
    marginTop: 2,
  },
  navigationArrow: {
    fontSize: 20,
    color: '#999',
  },
  logoutButton: {
    backgroundColor: '#FF3B30',
    margin: 20,
    padding: 15,
    borderRadius: 10,
    alignItems: 'center',
  },
  logoutButtonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default SettingsScreen;